<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap test</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<style>
		body{
			background-color: #AFCCE7;
		}
		.row{
			background-color: #03A9F4;
		}
	</style>
</head>
<body>
	<ul class="nav nav-tabs" style="margin-bottom: 30px;">
	  <li role="presentation" class="active"><a href="#">Home</a></li>
	  <li role="presentation"><a href="#">Profile</a></li>
	  <li role="presentation"><a href="#">Messages</a></li>
	</ul>
	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	  Launch demo modal
	</button>
  <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
	<div class="dropdown open">
		<ul class="dropdown-menu">
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
		</ul>
	</div>
	<span class="glyphicon glyphicon-search"></span>
	<input type="button" class="btn btn-default" value="default">
	<input type="button" class="btn btn-primary" value="primary">
	<input type="button" class="btn btn-success" value="success">
	<input type="button" class="btn btn-info" value="info">
	<input type="button" class="btn btn-warning" value="warning">
	<input type="button" class="btn btn-danger" value="danger">
	<input type="button" class="btn btn-link" value="link">
	<input type="button" class="btn btn-danger disabled" value="danger .disabled">
	<input type="button" class="btn btn-danger" value="danger disabled" disabled="disabled">
	<input type="button" class="btn btn-primary btn-block" value="btn-block">
	<p class="text-muted">text-muted</p>
	<p class="text-primary">text-primary</p>
	<p class="text-danger bg-danger">text-danger</p>
	<a href="" class="close">&times;</a>
	<button class="close">&times;</button>
	<span class="caret">xz</span>
	<div class="btn-group">
		<button  type="button" class="btn btn-success">buttongroup</button>
		<button type="button" class="btn btn-success">buttongroup</button>
		<button type="button" class="btn btn-success">buttongroup</button>
	</div>
	<img src="images/promo2.png">
	<img src="images/promo2.png" class="img-rounded">
	<img src="images/promo2.png" class="img-circle">
	<img src="images/promo2.png" class="img-thumbnail">

	<code>&lt;body&gt;&lt;/body&gt;</code>
	<kbd style="width: 300px;"></kbd>
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th>name</th>
				<th>sex</th>
				<td>age</td>
			</tr>
		</thead>
		<tbody>
			<tr class="success">
				<td>effall</td>
				<td>woman</td>
				<td>10</td>
			</tr>
			<tr class="danger">
				<td>effall</td>
				<td>woman</td>
				<td>18</td>
			</tr>
			<tr>
				<td>effall</td>
				<td>woman</td>
				<td>76</td>
			</tr>
		</tbody>
	</table>
	<div class="container">
		<div class="row">
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
			<div class="col-md-1 col-sm-2">col-md-1</div>
		</div>
		<div class="row">
			<div class="col-md-8">col-md-8</div>
			<div class="col-md-4">col-md-4</div>
		</div>
		<div class="row">
			<div class="col-md-4">col-md-4</div>
			<div class="col-md-4">col-md-4</div>
			<div class="col-md-4">col-md-4</div>
		</div>
		<div class="row">
			<div class="col-md-6">col-md-6</div>
			<div class="col-md-6">col-md-6</div>
		</div>
		<!--列偏移-->
		<div class="row">
			<div class="col-md-4">col-md-4</div>
			<div class="col-md-4 col-md-offset-4">col-md-4 offset4</div>
		</div>
		<!--列嵌套-->
		<div class="row">
			<div class="col-md-9">
				col-md-9
				<div class="row">
					<div class="col-md-6">col-md-6</div>
					
					<div class="col-md-6">col-md-6</div>
				</div>
			</div>
			<div class="col-md-3">col-md-3</div>
		</div>
		<!--列排序-->
		<div class="row">
			<div class="col-md-9 col-md-push-3">col-md-9</div>
			<div class="col-md-3 col-md-pull-9">col-md-3</div>
		</div>
		<!--跨设备组合 清除浮动问题-->
		<div class="row">
			<div class="col-sm-6 col-md-3">col-sm-6 col-md-3 清除浮动问题 清除浮动问题 清除浮动问题 清除浮动问题 清除浮动问题 清除浮动问题 清除浮动问题 清除浮动问题 清除浮动问题</div>
			<div class="col-sm-6 col-md-3">col-sm-6 col-md-3</div>
			<div class="clearfix visible-sm"></div>
			<div class="col-sm-6 col-md-3">col-sm-6 col-md-3</div>
			<div class="col-sm-6 col-md-3">col-sm-6 col-md-3</div>
		</div>
	</div>
	<ul class="nav nav-tabs">
	  <li role="presentation" class="active"><a href="#">Home</a></li>
	  <li role="presentation"><a href="#">Profile</a></li>
	  <li role="presentation"><a href="#">Messages</a></li>
	</ul>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>

</html>